<template>
  <view>
    <view class="uni-px-4" @click="goto('/pages/index/search')">
      <view class="w-full h-9 flex justify-center items-center bg-gray-200 rounded-3xl">
        <uni-icons type="search" size="16"></uni-icons>
      </view>
    </view>
	<view class="uni-px-4">
		<scroll-view class="tab-container" scroll-x="true" :scroll-left="scrollLeft">
		     <view class="tab-item" :class="currentTabIndex == index?'isActived':''" v-for="(item, index) in radioList" :key="index" @tap="switchTab(index)">
		       {{item.label}}
		     </view>
		</scroll-view>
	 </view>
	<swiper class="swiper" :current="current" @change="handleSwiperChange"  ref="swiper" :circular="false" :style="{ height: swiperHeight + 'px' }">
					
	 				<swiper-item v-for="(item, index) in radioList" :key="index">
	 					  <NoteCard :list="list" ref="noteCard" class="noteCard" v-if="current == index"/>
						  <uni-load-more iconType="circle" :status="status"  v-if="current == index"/>
	 	</swiper-item>
	</swiper>
   
  </view>
</template>

<script>
import NoteCard from '@/components/NoteCard'
import { httpNoteList,httpRadioList } from '@/utils/api.js'
export default {
  components: { NoteCard },
  data() {
    return {
      list: [],
      page: 1,
      size: 10,
      status: 'more',
		radioList:[{label:'推荐',value:'0'},{label:'美食',value:'1'},{label:'生活',value:'2'},{label:'寻根',value:'3'},{label:'饮食',value:'4'},{label:'政策',value:'5'}],
	    tabs: ['标签1', '标签2', '标签3', '标签4', '标签5','标签1', '标签2', '标签3', '标签4', '标签5'],
		scrollLeft: 0,
	    currentTabIndex: 0,
		current:0,
		// tab切换区域的高度
		swiperHeight:0,
		isTab:false
    }
  },
  onLoad(options) {
    this.getNotes()
  },
  // 下拉刷新
  async onPullDownRefresh() {
    this.list = []
    this.page = 1
    await this.getNotes()
    uni.stopPullDownRefresh()
  },
  // 触底
  onReachBottom() {
    this.getNotes({
      page: this.page,
      size: 4,
    })
  },
  methods: {
	  handleSwiperChange(current,source){
		 
		if(this.isTab){
			return this.isTab = false
		}
		  this.currentTabIndex = current.detail.current;
		   // 获取 swiper 组件实例
		  this.current = current.detail.current
		  this.switchNotes()
	  },
	  goto(url) {
      uni.navigateTo({
        url
      })
    },
    async getNotes() {
      this.status = 'loading'
      const { code, data } = await httpNoteList({
        size: this.size,
        page: this.page,
		leixing:this.radioList[this.currentTabIndex].value
      })
      if (code === 200) {
        const notes = data.rows
        if (notes.length === 0) {
          this.status = 'noMore'
          return false
        }
        this.list = [...this.list,...notes]
        this.page++
        this.status = 'more'
        if (notes.length < this.size) this.status = 'noMore'
      }
	  this.$nextTick(()=>{
		    const query = uni.createSelectorQuery().in(this);
		      query.select('.listContainer').boundingClientRect( data => {
				this.swiperHeight = data.height + 40
		      }).exec();
	  })
    },
	async switchNotes() {
	  this.status = 'loading'
	  this.page = 1
	  const { code, data } = await httpNoteList({
	    size: this.size,
	    page: this.page,
		leixing:this.radioList[this.currentTabIndex].value
	  })
	  if (code === 200) {
	    const notes = data.rows
	    this.list = [...notes]
		this.page++
	    this.status = 'more'
	    if (notes.length < this.size) this.status = 'noMore'
	  }
	  this.$nextTick(()=>{
	  const query = uni.createSelectorQuery().in(this);
	    query.select('.listContainer').boundingClientRect( data => {
	  	this.swiperHeight = data.height + 40
	    }).exec();
	  })
	},
	async getRadioList(){
		
		const { code, data } = await httpRadioList()
		if (code === 200) {
		  this.radioList = data.map(item=>{
			  return{
				  label:item.t_name,
				  value:item.t_type,
			  }
		  })
		}
	},
	switchTab(index) {
		  this.isTab = true
	      this.currentTabIndex = index;
		   // 获取 swiper 组件实例
		  this.current = index
		  this.switchNotes()
	      // 可以在这里添加切换标签的逻辑 
	}
  },
  mounted() {
		this.getRadioList()
	 
  },
   onShow() {
		// 在这里进行接口请求
        this.switchNotes()
   }
}
</script>

<style lang="scss" scoped>
	.tab-container {
	  white-space: nowrap;
	  display: flex;
	}
	.tab-item {
	  display: inline-block;
	  padding: 10px;
	  margin-right: 10px;
	  color:#aaa;
	  // border: 1px solid #ccc;
	  border-bottom: none;
	  cursor: pointer;
	}
	.isActived{
		color:#000;
		font-weight: 700;
	}
	.tab-item.active {
	  /* 选中的tab样式 */
	  font-weight: bold;
	}
</style>
